<template>
  <div class="module-wrapper">
    <div class="search-part">

      <div class="search-part-right">
        <el-input v-model="contractData" :placeholder="$t('privateKey.searchUser')" class="input-with-select" clearable @clear="clearInput">
          <el-button slot="append" icon="el-icon-search" @click="search" />
        </el-input>
      </div>
    </div>
    <div class="search-table">
      <el-table v-loading="loading" :data="userList" tooltip-effect="dark">
        <el-table-column prop="address" :label="$t('privateKey.userAddress')" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.address" class="wbs-icon-copy font-12 copy-public-key" :title="$t('privateKey.userAddress')" @click="copyPubilcKey(scope.row.address)" />
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" :label="$t(&quot;privateKey.userName&quot;)" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ formatterData(scope.row.userName) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userId" :label="$t(&quot;privateKey.userId&quot;)" show-overflow-tooltip width="120" align="center">
          <template slot-scope="scope">
            <span>{{ formatterData(scope.row.userId) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" :label="$t('privateKey.description')" show-overflow-tooltip width="135" align="center">
          <!-- <template slot-scope="scope">
                    <span class="link" @click='openPath(scope.row)'>{{scope.row.contractPath}}</span>
                </template> -->
        </el-table-column>

        <el-table-column prop="signUserId" :label="$t('privateKey.signUserId')" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.signUserId" class="wbs-icon-copy font-12 copy-public-key" :title="$t('privateKey.signUserId')" @click="copyPubilcKey(scope.row.signUserId)" />
            <span>{{ scope.row.signUserId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('home.createTime')" show-overflow-tooltip width="150" align="center" />
        <el-table-column fixed="right" :label="$t('nodes.operation')" width="160">
          <template slot-scope="scope">
            <el-button v-if="!(disabled || scope.row.userId > 0)" type="text" @click="importData(scope.row)">{{ $t("system.import") }}</el-button>
            <el-button v-if="disabled || scope.row.userId > 0" type="text" size="small" :class="{'grayColor': disabled}" @click="modifyDescription(scope.row)">{{ $t('text.update') }}</el-button>
            <!-- <el-button :disabled="disabled" :class="{'grayColor': disabled}" @click="send(scope.row)" type="text" size="small">{{$t('contracts.sendTransaction')}}</el-button>
                    <el-button :disabled="!scope.row.contractAddress || !scope.row.haveEvent" :class="{'grayColor': !scope.row.contractAddress}" @click="checkEvent(scope.row)" type="text" size="small">{{$t('title.checkEvent')}}</el-button>
                    <el-button :disabled="disabled" :class="{'grayColor': disabled}" @click="handleStatusBtn(scope.row)" type="text" size="small">{{freezeThawBtn(scope.row)}}</el-button>
                    <el-button :disabled="disabled" :class="{'grayColor': disabled}" @click="handleMgmtCns(scope.row)" type="text" size="small">{{$t('text.cns')}}</el-button>
                    <el-button :disabled="disabled" :class="{'grayColor': disabled}" @click="updateAbi(scope.row)" type="text" size="small">{{$t('contracts.updateAbi')}}</el-button>
                    <el-button :disabled="disabled" :class="{'grayColor': disabled}" @click="deleteAbi(scope.row)" type="text" size="small">{{$t('contracts.deleteAbi')}}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="total > 10" class="page" :current-page="pageNumber" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-if="$store.state.creatUserVisible" :visible.sync="$store.state.creatUserVisible" :title="$t('privateKey.createUser')" width="640px" :append-to-body="true" class="dialog-wrapper" center>
      <creat-user ref="creatUser" :disable-pub="true" :address="address" @creatUserClose="creatUserClose" @bindUserClose="bindUserClose" />
    </el-dialog>
    <el-dialog v-if="$store.state.importPrivateKey" :visible.sync="$store.state.importPrivateKey" :title="$t('privateKey.importPrivateKey')" width="640px" :append-to-body="true" class="dialog-wrapper" center>
      <v-importKey ref="importKey" @importPrivateKeySuccess="importPrivateKeySuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { getAllUserList, getUserDescription } from '@/api/exercises'
import creatUser from './components/creatUser.vue'
import importKey from './components/importKey.vue'
export default {
  name: 'TotalContract',
  components: {
    creatUser,
    importKey
  },
  data() {
    return {
      disabled: false,
      loading: false,
      userList: [],
      total: 0,
      pageNumber: 1,
      pageSize: 10,
      address: null,
      contractData: ''
    }
  },
  mounted() {
    if ((localStorage.getItem('root') === 'admin' || localStorage.getItem('root') === 'developer') && 1) {
      this.disabled = false
    } else {
      this.disabled = true
    }
    if (1 && (localStorage.getItem('configData') == 3 || localStorage.getItem('deployType') == 0)) {
      this.getList()
    }
  },
  methods: {
    formatterData(row) {
      if (row === null) {
        return '-'
      } else {
        return row
      }
    },
    getList() {
      this.loading = true
      const groupId = 1
      const reqData = {
        groupId: groupId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      let reqQuery = {}
      reqQuery = {
        type: 1
      }
      if (this.contractData) {
        reqQuery['commParam'] = this.contractData
      }
      getAllUserList(reqData, reqQuery)
        .then(res => {
          if (res.code === 0) {
            this.userList = res.data
            this.total = res.data.totalCount
            this.loading = false
          } else {
            this.loading = false
            this.$messageOnce({
              message: this.$chooseLang(res.code),
              type: 'error',
              duration: 2000
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$messageOnce({
            message: err.data || this.$t('text.systemError'),
            type: 'error',
            duration: 2000
          })
        })
    },
    handleSizeChange: function(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getList()
    },
    handleCurrentChange: function(val) {
      this.pageNumber = val
      this.getList()
    },
    importData(val) {
      this.address = val.address
      this.$store.dispatch('exercises/switch_creat_user_dialog')
    },
    creatUserClose() {
      this.getList()
    },
    bindUserClose() {
      this.getList()
    },
    modifyDescription(params) {
      this.$prompt(this.$t('privateKey.inputDescription'), '', {
        confirmButtonText: this.$t('text.sure'),
        cancelButtonText: this.$t('text.cancel'),
        inputValue: params.description,
        inputPattern: /^.{3,64}$/,
        inputErrorMessage: this.$t('text.textInfo')
      })
        .then(({ value }) => {
          this.userDescriptionInfo(value, params)
        })
        .catch(() => {
          this.$messageOnce({
            type: 'info',
            message: this.$t('text.cancel')
          })
        })
    },
    userDescriptionInfo(value, params) {
      const reqData = {
        userId: params.userId,
        description: value
      }
      getUserDescription(reqData)
        .then(res => {
          if (res.code === 0) {
            this.getList()
            this.$messageOnce({
              type: 'success',
              message: this.$t('privateKey.updateUserSuccess')
            })
          } else {
            this.$messageOnce({
              message: this.$chooseLang(res.code),
              type: 'error',
              duration: 2000
            })
          }
        })
        .catch(err => {
          this.$messageOnce({
            message: err.data || this.$t('text.systemError'),
            type: 'error',
            duration: 2000
          })
        })
    },
    importPrivateKeySuccess() {
      this.getList()
    },
    copyPubilcKey(val) {
      if (!val) {
        this.$messageOnce({
          type: 'fail',
          showClose: true,
          message: this.$t('text.copyErrorMsg'),
          duration: 2000
        })
      } else {
        this.$copyText(val).then(e => {
          this.$messageOnce({
            type: 'success',
            showClose: true,
            message: this.$t('text.copySuccessMsg'),
            duration: 2000
          })
        })
      }
    },
    search: function() {
      this.pageNumber = 1
      this.getList()
    },
    clearInput() {
      this.contractName = ''
      this.contractAddress = ''
      this.contractData = ''

      this.getList()
    }
  }
}
</script>

<style scoped>
.input-with-select >>> .el-input__inner {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #eaedf3;
    box-shadow: 0 3px 11px 0 rgba(159, 166, 189, 0.11);
}
.input-with-select >>> .el-input-group__append {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 3px 11px 0 rgba(159, 166, 189, 0.11);
}
.input-with-select >>> .el-button {
    border: 1px solid #20d4d9;
    border-radius: inherit;
    background: #20d4d9;
    color: #fff;
}
.grayColor {
    color: #666 !important;
}
</style>
